<template>
    <div class="app-container">
        <div class="chartDom" ref="chartDom"></div>
    </div>
</template>
<script>

import moment from "moment";
import { regionCorner } from "@/api/qu/qyqjfacility";
export default {
  name: "qycjgl",
  data() {
    return {
        chartDom:null,
        chartList:[
        ],
        cornerTypeOptions:[]
    };
  },
  created() {
    this.getDicts("corner_type").then(response => {
          this.cornerTypeOptions = response.data;
        });
  },
  mounted(){
        // this.getList()
        this.chartDom = this.$echarts.init(this.$refs.chartDom);
        this.getregionCorner()
   },
  methods: {
    async getregionCorner(){
        try {
            const data= await regionCorner();
          this.chartList= data.rows.map(item=>{
               return {
                name: this.cornerTypeFormat(item),
                value:item.cornerNum
               }
            })
            // console.log(this.chartList);
            // this.chartList=data;
            this.chartDomFn();
            
        } catch (error) {
            console.log(error);
        }
    },
      // 区角类型字典翻译
      cornerTypeFormat(row) {
            return this.selectDictLabel(this.cornerTypeOptions, row.cornerType);
         },
    chartDomFn(){
          const option = {
         // backgroud:'#333',
         title: {
           text: '区角统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          dataZoom:{
           bottom:0,
           show:12/this.chartList.length<1,
           // show:true,
           type:'slider',
           zoomLock:true,
           brushSelect:false,
           height:8,
           // backgroundColor:'#000000',
           handleSize:'0',
           // moveHandleSize:1,
           // moveHandleStyle:{
           //   borderType:'dotted'
           // },
           sow:true,
           xAxisIndex:[0],
           start:0,
           end:12/this.chartList.length*100
         },
          legend: {
            selectedMode: 'single',
            top:0,
              left:'right',
           
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               rotate:0,
               interval: 0,//使x轴文字显示全
              },
              data: this.chartList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value'
              }
          ],
          color:['#2f89cf','#27d08a'],
          series: [
              {
                  name: '',
                  type: 'bar',
                  // stack: 'Ad',
                  barWidth:'50',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.chartList,
              },
          ]
          }
            // 使用刚指定的配置项和数据显示图表
            this.chartDom.setOption(option,true);
            window.addEventListener("resize", this.monitorResize);
      },
     //地图监听窗口缩放事件
     monitorResize(){
        this.chartDom.resize();
      
      },
  
  }
};
</script>

<style lang="scss" scoped>
.chartDom{
    width:90%;
    height:500px;
}
</style>